import { ReactComponent as Dark } from '@/assets/svg/darkMode.svg';
import { ReactComponent as Light } from '@/assets/svg/lightMode.svg';
import useDarkMode from '@/hooks/useDarkMode';

import styles from '../index.module.scss';

interface DarkModeProps {
  className?: string;
  style?: object;
}

const SwitchDarkMode: React.FC<DarkModeProps> = props => {
  const className = props?.className ? props.className : '';
  const { currentDarkMode, switchDarkMode } = useDarkMode();

  return (
    <div
      style={props?.style}
      className={`${styles.darkmode} ${className}`}
      onClick={switchDarkMode}
    >
      {currentDarkMode === 'dark' ? (
        <Dark className="inline w-5 cursor-pointer" />
      ) : (
        <Light className="inline w-5 cursor-pointer" />
      )}
    </div>
  );
};

export default SwitchDarkMode;
